import { NavLink, Outlet } from "@remix-run/react";
import { useEffect } from "react";
import Header from "~/components/Header";
import MenuBar from "~/components/MenuBar";

export default function Features() {
    useEffect(() => {
        const userLogged = localStorage.getItem("userLogged");
        if (!userLogged) {
            location.pathname = "/login";
        }
    }, []);

    return (
        <div className="flex flex-col">
            <Header />
            <MenuBar />
            <div className="flex">
                <aside className="w-64 h-screen">
                    <header className="p-4 border-b ml-4">
                        <h2 className="text-xl">创意设计</h2>
                    </header>
                    <nav className="p-4">
                        <ul className="flex flex-col gap-2">
                            <li>
                                <NavLink
                                    to="/features/t2i"
                                    className={({ isActive }) =>
                                        `block px-4 py-2 rounded-lg transition-colors ${
                                            isActive
                                                ? "bg-emerald-100 text-emerald-600 font-medium"
                                                : "text-gray-600 hover:bg-gray-100"
                                        }`
                                    }
                                >
                                    文生图
                                </NavLink>
                            </li>
                            <li>
                                <NavLink
                                    to="/features/i2i"
                                    className={({ isActive }) =>
                                        `block px-4 py-2 rounded-lg transition-colors ${
                                            isActive
                                                ? "bg-emerald-100 text-emerald-600 font-medium"
                                                : "text-gray-600 hover:bg-gray-100"
                                        }`
                                    }
                                >
                                    图生图
                                </NavLink>
                            </li>
                            <li>
                                <NavLink
                                    to="/features/transfer"
                                    className={({ isActive }) =>
                                        `block px-4 py-2 rounded-lg transition-colors ${
                                            isActive
                                                ? "bg-emerald-100 text-emerald-600 font-medium"
                                                : "text-gray-600 hover:bg-gray-100"
                                        }`
                                    }
                                >
                                    风格迁移
                                </NavLink>
                            </li>
                        </ul>
                    </nav>
                    <header className="p-4 border-b ml-4 mt-5">
                        <h2 className="text-xl">我的设计</h2>
                    </header>
                    <nav className="p-4">
                        <ul className="flex flex-col gap-2">
                            <li>
                                <NavLink
                                    to="/features/favorites"
                                    className={({ isActive }) =>
                                        `block px-4 py-2 rounded-lg transition-colors ${
                                            isActive
                                                ? "bg-emerald-100 text-emerald-600 font-medium"
                                                : "text-gray-600 hover:bg-gray-100"
                                        }`
                                    }
                                >
                                    我的收藏
                                </NavLink>
                            </li>
                            <li>
                                <NavLink
                                    to="/features/history"
                                    className={({ isActive }) =>
                                        `block px-4 py-2 rounded-lg transition-colors ${
                                            isActive
                                                ? "bg-emerald-100 text-emerald-600 font-medium"
                                                : "text-gray-600 hover:bg-gray-100"
                                        }`
                                    }
                                >
                                    创作历史
                                </NavLink>
                            </li>
                        </ul>
                    </nav>
                </aside>
                <main className="flex-1">
                    <Outlet />
                </main>
            </div>
        </div>
    );
}
